<template>
    <div>
      <div class="loadmore-class loadmore" v-if="visible">
        <div
          class="loading"
          :style="{ borderColor: '#e5e5e5 #e5e5e5 #e5e5e5 ' + diyTheme?.host_bg }"
        ></div>
        <div class="loadmore-tips">{{ text }}</div>
      </div>
    </div>
  </template>
  <script lang="ts">
  export default {
    name: "more-loadmore",
  };
  </script>
  <script lang="ts" setup>
  import { ref } from "vue";
  import { diyThemeDataType } from "@/types";
  import { useConfig } from "@/store";
  
  const props = withDefaults(
    defineProps<{
      visible?: boolean;
      text?: string;
      type?: string;
    }>(),
    {
      visible: false,
      text: "正在加载",
      type: "",
    }
  );
  
  const diyTheme = ref<diyThemeDataType>(useConfig().getDiyTheme);
  </script>
  
  
  <style scoped>
      .loadmore {
        width: 48%;
        margin: 1.5em auto;
        line-height: 1.5em;
        font-size:  var(--base-size-small);
        text-align: center;
      }
      .loadmore-tips {
        display: inline-block;
        vertical-align: middle;
        color: var(--base-grey);
      }
      
      .loading {
        display: inline-block;
        margin: 0 6px;
        vertical-align: middle;
        width: 28rpx;
        height: 28rpx;
        background: 0 0;
        border-radius: 50%;
        border:3px solid;
        /* border-color: #e5e5e5 #e5e5e5 #e5e5e5 var(--default); */
        animation: rotate 0.7s linear infinite;
      }
      
      @-webkit-keyframes rotate {
        0% {
          transform: rotate(0);
        }
      
        100% {
          transform: rotate(360deg);
        }
      }
      
      @keyframes rotate {
        0% {
          transform: rotate(0);
        }
      
        100% {
          transform: rotate(360deg);
        }
      }
  
  </style>
  